import React, { Component, PropTypes } from 'react';
import echarts from 'echarts';

class ReactEChart extends Component {
  static propTypes = {
    config: PropTypes.object.isRequired,
  }
  componentDidMount() {
    this.chart = echarts.init(this.chartDom);
    this.renderChart(this.props.config);
  }
  shouldComponentUpdate(nextProps) {
    this.renderChart(nextProps.config);
    return false;
  }
  componentWillUnmount() {
    this.chart.dispose();
  }
  getChart = () => {
    if (!this.chart) {
      throw new Error('getChart() should not be called before the component is mounted');
    }
    return this.chart;
  }
  renderChart = (config) => {
    if (!config) {
      throw new Error('Config must be specified for the component');
    }

    this.chart.setOption(config);
  }
  render() {
    return <div ref={(node) => { this.chartDom = node; }} style={{ height: '100%', minHeight: 200 }} />;
  }
}


export default ReactEChart;
